import cs from 'classnames';
import styles from '../../index.module.less';
import { memo, useEffect, useRef, useState } from "react";
import { map, find } from 'lodash';
import * as echarts from 'echarts';
import { lineChartOption } from "../../constants";

interface Props {
    boxClass: string
}

export default (props: Props) => {
    const lineChartRef = useRef(null);
    const { boxClass } = props;

    useEffect(() => {
        const lineChart = echarts.init(lineChartRef.current);
        const option = lineChartOption();
        lineChart.setOption({
            ...option,
        });

        // 组件卸载时销毁图表
        return () => {
            lineChart.dispose();
        };
    }, [])

    return (
        <div className={cs(styles.timeTrend, styles.commonBox, boxClass)}>
            <div className={styles.moduleHeader}>
                <div className={cs(styles.icon)}></div>
                <div className={styles.title}>工作时段趋势</div>
            </div>
            <div className={styles.Container}>
                <div ref={lineChartRef} style={{width: '100%', height: '100%'}}></div>
            </div>
        </div>
    )
}